<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :autoBack="true">
			<view slot="center" class="navigate-title">公司管理</view>
		</u-navbar>

		<view class="search-box">
			<view style="width: calc(100% - 100rpx);">
				<u--input placeholder="请输入公司名称" prefixIcon="search" prefixIconStyle="font-size: 36rpx;color: #acacac"
					placeholderClass="input-placeholder" :customStyle="inputStyle" v-model="companyName"
					:clearable="true" @clear="clear()"></u--input>
			</view>
			<view @click="getCompany()">搜索</view>
		</view>

		<scroll-view scroll-y class="scroll">
			<view class="card" v-for="(item, index) in companyList" :key="index" v-show="item">
				<view class="now-contract" v-if="index == 0">
					当前公司
					<view class="triangle-left"></view>
				</view>
				<view class="top">
					<view class="img-bg">
						<image src="../../static/images/companyLogo.png"></image>
					</view>
					<view class="info-box">
						<text>{{item.companyName}}</text>
						<view style="display: flex;align-items: center;margin-top: 10rpx;">
							<image src="../../static/images/location.png"></image>
							<view class="location">{{item.area||'--'}}</view>
						</view>
					</view>
					<view class="btn">
						<view class="logoff-btn" @click="logout(item.id)">解绑</view>
						<view class="change-btn" @click="changeCurrentCompany(item.id)">切换</view>
					</view>
				</view>

				<view class="bottom">
					<view class="item">
						<view class="title">法定代表人</view>
						<text>{{item.legalName}}</text>
					</view>
					<view class="item">
						<view class="title">申报类型</view>
						<text>{{item.declareState == 0? '正常申报' : '零申报'}}</text>
					</view>
					<view class="item">
						<view class="title">规模类型</view>
						<text>{{item.scale}}</text>
					</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" content="是否解除公司绑定"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<view class="add-btn" @click="toAdd()">
			<u-icon name="plus" size="40rpx" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		getCompanyApi,
		deleteCompanyApi,
		bindingApi,
		changeCurrentCompanyApi,
		firstBindingApi,
		currentCompanyApi
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				companyList: [],
				companyName: '',
				scaleList: [{
						value: '0',
						label: '个人独资'
					},
					{
						value: '1',
						label: '小规模公司'
					},
					{
						value: '2',
						label: '一般纳税人公司'
					},
					{
						value: '3',
						label: '个体工商户'
					},
					{
						value: '4',
						label: '其他企业'
					},
				],
				companyId: '',
				msgType: 'error',
				companyInfo: {},
			}
		},
		methods: {
			clear() {
				this.companyName = ''
				this.getCompany()
			},
			toAdd() {
				uni.navigateTo({
					url: '/subpackageTwo/pages/addCompany/addCompany'
				})
			},
			async getCompany() {
				await getCompanyApi(this.companyName).then(res => {
					if (res.code == 200) {
						if (res.data) {
							this.companyList = res.data.map(item => {
								const newItem = {
									...item
								}
								const scale = this.scaleList.find(scaleitem => scaleitem.value == item
									.scale)
								// newItem.scale = scale.label
								newItem.scale = scale ? scale.label : '暂无';
								return newItem
							})
							let companyInfo = null
							this.companyList.forEach((item, index) => {
								if (item.id == this.companyInfo.id) {
									companyInfo = this.companyList.splice(index, 1)[0];
								}
							})
							this.companyList.unshift(companyInfo);
						}
					}
				})
			},
			logout(id) {
				this.companyId = id
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.deleteCompany()
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			async deleteCompany() {
				await deleteCompanyApi(this.companyId).then(res => {
					if (res.code == 200) {
						this.$refs.alertDialog.close()
						this.getCompany()
						uni.$u.toast('解除绑定成功')
						this.currentCompany()
					} else {
						this.$refs.alertDialog.close()
						uni.$u.toast(res.msg)
					}
				})
			},
			async changeCurrentCompany(id) {
				await changeCurrentCompanyApi(id).then(res => {
					if (res.code == 200) {
						uni.$u.toast('切换成功')
						this.currentCompany()
					}
				})
			},
			async currentCompany() {
				await currentCompanyApi().then(res => {
					if (res.code == 200) {
						this.companyInfo = res.data
						uni.setStorageSync('companyInfo', this.companyInfo)
						this.getCompany()
					} else {
						uni.setStorageSync('companyInfo', '')
					}
				})
			},
		},
		onShow() {
			this.currentCompany()
			// this.getCompany()
		},
		computed: {
			inputStyle() {
				const style = {
					border: 'none !important;',
					height: '54rpx',
					'border-radius': '36rpx',
					background: 'rgba(245, 245, 245, 1)',
				}
				return style
			},
			popInputStyle() {
				const style = {
					'font-size': '28rpx',
					border: '4rpx solid rgba(65, 136, 239, 1) !important',
					background: ' rgba(245, 249, 252, 1)',
				}
				return style
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.search-box {
			// width: 100%;
			height: 110rpx;
			padding: 0rpx 30rpx;
			margin-left: -30rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;

			::v-deep .input-placeholder {
				color: rgba(172, 172, 172, 1);
				font-size: 26rpx;
				letter-spacing: 2rpx;
			}
		}

		.scroll {
			width: calc(100% + 12rpx);
			margin: 10rpx;
			height: calc(100vh - 238rpx);
			margin-left: -6rpx;

			.card {
				// width: calc(100% - 58rpx);
				margin: 40rpx;
				height: 210rpx;
				border-radius: 10rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
				// margin-top: 24rpx;
				// margin-left: 6rpx;
				padding: 38rpx 16rpx 0rpx 30rpx;
				position: relative;

				.now-contract {
					width: 94rpx;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 4rpx 4rpx 4rpx 0rpx;
					background: linear-gradient(106.05deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 141, 26, 1);
					box-shadow: 2rpx 2rpx 3rpx rgba(0, 0, 0, 0.15);
					font-size: 18rpx;
					text-align: center;
					color: #fff;
					position: absolute;
					top: 0;
					left: -6rpx;

					.triangle-left {
						width: 0;
						height: 0;
						border-right: 6rpx solid rgba(187, 42, 57, 1);
						border-bottom: 6rpx solid transparent;
						position: absolute;
						left: 0;
						bottom: -6rpx;
					}
				}

				.top {
					display: flex;
					justify-content: space-between;

					.img-bg {
						width: 60rpx;
						height: 60rpx;
						border-radius: 4rpx;
						background: rgba(65, 136, 239, 1);
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 34rpx;
							height: 34rpx;
						}
					}

					.info-box {
						width: calc(100% - 300rpx);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-left: 10rpx;
						line-height: 30rpx;

						text {
							font-size: 30rpx;
						}

						image {
							width: 18rpx;
							height: 18rpx;
						}

						.location {
							color: rgba(148, 148, 148, 1);
							font-size: 20rpx;
							margin-left: 4rpx;
						}
					}

					.btn {
						display: flex;
						// align-items: center;

						.change-btn {
							width: 100rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 4rpx;
							background: rgba(233, 236, 255, 1);
							color: rgba(65, 136, 239, 1);
							font-size: 24rpx;
						}

						.logoff-btn {
							width: 100rpx;
							height: 46rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 4rpx;
							background: rgba(255, 255, 255, 1);
							border: 2rpx solid rgba(232, 235, 255, 1);
							color: rgba(65, 136, 239, 1);
							font-size: 24rpx;
							margin-right: 10rpx;
						}
					}
				}

				.bottom {
					width: calc(100% + 46rpx);
					margin-top: 34rpx;
					display: flex;
					justify-content: space-between;
					margin-left: -30rpx;

					.item {
						width: calc(100% / 3);
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						.title {
							color: rgba(148, 148, 148, 1);
							font-size: 22rpx;
							letter-spacing: 2rpx;
						}

						text {
							font-size: 26rpx;
							letter-spacing: 2rpx;
						}
					}
				}
			}
		}

		.add-btn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: rgba(65, 136, 239, 1);
			box-shadow: 2rpx -2rpx 4rpx rgba(17, 71, 153, 0.15), -2rpx 2rpx 6rpx rgba(17, 71, 153, 0.25);
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 244rpx;
			right: 30rpx;
		}

		.addpop {
			width: 650rpx;
			height: 490rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			text-align: center;

			.top-box {
				display: flex;
				justify-content: space-between;
				padding: 28rpx 28rpx 0 28rpx;

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.form-box {
				padding: 0rpx 34rpx;
				margin-top: 12rpx;

				.input-label {
					color: rgb(128, 128, 128);
					font-size: 32rpx;
					margin-bottom: 32rpx;
				}

				::v-deep .input-placeholder {
					color: #ccc;
					font-size: 28rpx;
				}
			}

			.binding-btn {
				width: 540rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 1);
				margin: 70rpx auto 0 auto;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				color: #fff;
			}
		}
	}
</style>